$main-color: #ecf0f3; // 主体颜色
$font-size: 16px;
$label-font-size: 16px;
$placeholder-font-size: 14px; // 默认显示文本字体大小
@function px2rem($px) {
	@return calc($px / $font-size) * 16px;
}

// shadow-color
$shadow-color: #b8b8b8; // box-shadow 暗面的颜色
$white-shadow-color: #ffffff; // box-shadow 亮面的颜色

// text
$text-color: #696868; // 普通文本的颜色
$active-text-color: #000000; // 文本激活时（eg. 被选中等）的颜色
$deep-bg-text-color: #cfcfcf; // 背景颜色为深色时的 文本颜色
$deep-bg-active-text-color: #ffffff; // 背景颜色为深色时的 文本被选中的颜色

// liner-gradient
$liner-gradient-from: #787878; // 渐变开始值
$liner-gradient-to: #0f0f0f; // 渐变结束值
$liner-gradient: linear-gradient(
	160deg,
	$liner-gradient-from,
	$liner-gradient-to
); // 容器渐变的颜色（e.g. button）
$text-liner-gradient: linear-gradient(
	160deg,
	$liner-gradient-from,
	$liner-gradient-to
); // 字体渐变的颜色

// padding
$padding: px2rem(4px);
$padding-8: px2rem(8px);
$padding-16: px2rem(16px);
$padding-20: px2rem(20px);
$padding-24: px2rem(24px);
$padding-32: px2rem(32px);
$padding-48: px2rem(48px);

// margin
$margin: px2rem(4px);
$margin-8: px2rem(8px);
$margin-12: px2rem(12px);
$margin-16: px2rem(16px);
$margin-20: px2rem(20px);
$margin-24: px2rem(24px);
$margin-28: px2rem(28px);
$margin-32: px2rem(32px);
$margin-40: px2rem(40px);
$margin-48: px2rem(48px);

// border-radius
$border-radius: px2rem(16px);
$border-radius-large: px2rem(16px);
$input-border-radius: px2rem(4px);
$input-border-radius-medium: px2rem(8px);
$input-border-radius-large: px2rem(12px);

// bg-color
$bg-color: $main-color;

// button
$button-height: 32px;
$button-border-radius: 10px;
$button-box-shadow: 5px 5px 4px $shadow-color, -4px -4px 7px $white-shadow-color; // button 凸出的阴影值
$button-inset-box-shadow: inset 5px 5px 4px $shadow-color, inset -4px -4px 7px $white-shadow-color; // button 内陷的阴影值

// container
$container-box-shadow: 12px 12px 16px $shadow-color, -12px -12px 16px $white-shadow-color; // container 组件凸出的阴影值

// input
$input-bg-color: #e0e0e0;
$input-height-small: px2rem(16px);
$input-height-normal: px2rem(32px);
$input-height-medium: px2rem(36px);
$input-height-large: px2rem(40px);
$input-inset-box-shadow: inset 3px 4px 5px $shadow-color, inset -4px -12px 58px $white-shadow-color;
$input-box-shadow: 3px 4px 5px $shadow-color, -4px -12px 58px $white-shadow-color;

// icon
$icon-text-margin-lr: $margin-8; // icon 距离文本的左右边距
$icon-color: #696868; // 默认的 icon 颜色

// list 
$header-font-size: px2rem(28px); // 标题字体大小

// modal 
$modal-width: px2rem(550px);
$modal-height: px2rem(340px);
$modal-background: rgba(0, 0, 0, 0.3);
$modal-padding-tb: px2rem(8px);
$modal-padding-lr: px2rem(16px);
$modal-wrapper-padding: px2rem(12px); // modal 底部高度
$modal-button-shadow: 3px 3px 4px $shadow-color, -2px -1px 4px $white-shadow-color;
$modal-box-shadow: inset 12px 12px 8px $white-shadow-color, inset -8px -8px 10px $shadow-color;
$modal-footer-height: px2rem(56px); // modal 底部高度
$modal-header-height: px2rem(80px); // modal 底部高度

// popper
$popper-box-shadow: 3px 3px 4px $shadow-color, -2px -1px 4px $white-shadow-color; // popper 组件的阴影值